import { View, Image, Text, Input } from '@tarojs/components';
import Taro from '@tarojs/taro';
import React, { Component } from 'react';
import './receiving-code.less';
import { add } from '@/actions/counter';
import { getGlobalData } from '@/service/config';
const isIOS = getGlobalData('isIOS');

export interface IPasswordInputProps {
  value?: string;
  // input是否聚焦
  focus?: boolean;
  autoFocus: boolean;
  style?: {};
  // 获取input value 的方法
  getValue?: Function;
  // 输入完4位收货码后调用的方法
  toPay?: Function;
  // 收货码框的标题
  title?: string;
  disabled?: boolean;
  onfocus?: Function;
  onBlur?: Function;
  holdKeyboard?: boolean;
}

export interface IPasswordInputState { }

export default class PasswordInput extends Component<Partial<IPasswordInputProps>, IPasswordInputState> {
  constructor(props: IPasswordInputProps) {
    super(props);
  }
  static defaultProps = {
    onfocus: () => { },
    onBlur: () => { },
  };

  render() {
    let { value, style, focus, getValue, title, toPay, disabled, onfocus, onBlur, autoFocus, holdKeyboard } = this.props;
    return (
      <View style={style} className='receiving-code'>
        {title && <Text className="password-title">{title}</Text>}
        <View className="password-input">
          {/*固定box层*/}
          <View className="number-box">
            {[1, 2, 3, 4,].map((v, k) => {
              return <View key={k} className="item-box"></View>;
            })}
          </View>
          {/*真实收货码层*/}
          <View className="number-box real-box">
            {value &&
              value.split('').map((v, k) => {
                return (
                  <View key={k} className="item-box">
                    {v}
                  </View>
                );
              })}
          </View>
          {/* <Input style={{visibility:'hidden'}} password/> */}
          {/*input层*/}
          <Input
            className="input-hidden"
            value={value}
            disabled={disabled}
            onInput={(e) => {
              const vla = e.detail.value.replace(/[^\d]/g, '');
              if (!disabled) {
                // 输入4位数字后传出props
                if (e.detail.value.length === 4) {
                  toPay(vla);
                  Taro.hideKeyboard()
                } else {
                  toPay(vla);
                }
              }
            }}
            maxlength={4}
            type='number'
            focus={focus}
            autoFocus={autoFocus}
            // confirmType={'go'}
            confirmHold
            onFocus={() => onfocus()}
            onBlur={() => onBlur()}
          />
        </View>
      </View>
    );
  }
}
